✦ Case Study Kit v1

The blocks every case study is built from.

A reusable component layer that sits on top of the foundation. Each block maps to a beat in the narrative arc — frame the work, set the stakes, show the research, define the problem, defend the decisions, then reveal the solution and reflect. Drop them on the warm-dark case-study canvas and the story assembles itself.

01Frame the work

Set the scene & let people navigate

The first screen has ten seconds to communicate what the project is, your role, and that it's worth scrolling. Then give scanners a map.

Case study hero.cs-hero · .meta

Title, a one-line thesis with one coral emphasis, neutral category chips, and a four-up meta strip (role · team · tools · duration). Pair with a 16:9 cover below.

Product Design Mobile App UX Research

Project Name

A single sentence that says what it is and why it matters — with one idea carrying the accent, never the whole line.

My roleLead UX Designer — research, IxD & prototyping
TeamSolo, self-directed end-to-end
ToolsFigma · FigJam · Maze
Duration8 weeks · concept → tested
Cover figure & caption.figure · .figure__cap

A drop-target image frame with a quiet, icon-led caption. Aspect helpers: --16-9 / --wide / --4-3.

A one-line caption orients the reader to what they're looking at.

Table of contents.toc

A pill rail that can stick under the nav. Supports scanning — the strongest predictor of whether a recruiter reads on.

Process timeline.process · .phase

The double-diamond as a four-phase rail. Sets expectations for the chapters ahead and signals method literacy.

Phase 01
Discover
Secondary research, survey, 8 depth interviews.
Phase 02
Define
Personas, journey, problem statement, HMW.
Phase 03
Develop
Flows, IA, wireframes, three pivotal forks.
Phase 04
Deliver
Hi-fi prototype, usability test, iteration.
02Set the stakes

Lead with the outcome

Impact up front is the single most powerful move — before-and-after numbers, validation scores, and a one-glance summary for the impatient reader.

Overview · TL;DR.overview · .tldr

Context on the left, an at-a-glance summary panel on the right (problem · solution · outcome). Lets a busy reader get the whole story in 15 seconds.

A short paragraph framing the space — who it's for, what was broken, and the sharper question behind it. Two to three sentences, no jargon.

A second paragraph can add the constraint or the twist that made the brief interesting, setting up the work to come.

At a glance
Problem
Tools demand effort at the exact moment a person has none.
Solution
Passive, body-first support that helps in the moment.
Outcome
96 SUS · 4/4 hypotheses validated.
Impact metric grid.impact-grid · .metric

Four headline results, each an icon + number + plain-English label. One accent only — the number is the hero.

96 SUS
System Usability Scale — the top ~4% of products ever tested.
4/4
Design hypotheses validated in usability testing.
100%
Of testers said it fills a gap no current app addresses.
4.8/5
Rated coping effectiveness in the moment it mattered.
Evidence band.evidence · .ev

A lighter-weight stat row for the evaluation section — for validation numbers that aren't the headline.

96 SUS
"Excellent" usability band.
4.8/5
Coping effectiveness in the moment.
4/4
Hypotheses held up under testing.
+31%
More daily check-ins vs. the baseline.
03Show the research

Build understanding before designing

Prove you explored the problem space rather than jumping to a solution. Data points with sources, the methods you ran, what you found, and the real human voice underneath.

Stat bite cards.bites · .bite

Secondary-research facts — icon, big stat, one line, and a cited source. Citing keeps it credible, not decorative. Use .bites--2 for two-up.

1 in 6
adults experience a mental health problem in any given week.
Source, 2025
26%
of young adults can't perform daily tasks due to anxiety.
Source, 2023
95%
of wellbeing apps are abandoned within 10 days.
Source, 2024
Research method strip.method-strip

A one-line inventory of what you actually ran. Signals rigour at a glance.

Survey · quantitative sizing 8 depth interviews Mental-model exercises
Survey findings.findings · .finding

Each card is a number, the finding, and the design implication it drove. Use .finding--lead to spotlight the headline result.

75%
Found passive detection helpful or very helpful
Core premise validated
48%
Only sometimes know the reason behind their mood
Detection gap confirmed
67%
Name workload as the primary trigger
Informed trigger cards
Insight → design-move pairs.iv-list · .iv-pair

The most persuasive research format: what you learned (left, on sand) and exactly what it changed in the product (right), tagged with the feature it produced.

01Insight

All 8 rejected manual logging — they couldn't name their state in the moment.

What it changed

Passive detection became non-negotiable. No logging anywhere — not even optional.

→ Zero mood logging
02Insight

Suppression was the dominant pattern — pushing feelings aside.

What it changed

Home surfaces the detected state with a gentle "Does this feel right?" check.

→ State confirmation
Quote · verbatim.quote

A real participant line, large and unmissable. Nothing earns trust like the user's own words.

I don't want another thing to check. I want something that just knows when I'm not okay.

Interview P4
Postgraduate student, 24
Affinity / theme clusters.affinity · .cluster · .note-card

Synthesis made visible — grouped sticky-notes under named themes, with a count to show weight of evidence.

×6Effort at the wrong time
"By the time I'd open it, the moment's gone."
"Logging felt like homework."
"I forget it exists until I'm calm again."
×4Can't name the feeling
"I just feel 'off', not 'anxious'."
"Picking an emoji felt fake."
×5Want to be understood
"I wish something noticed first."
"Talking helps more than typing."
04Define the problem

Turn findings into a target

Who you're designing for, what their day actually feels like, and the problem framed sharply enough to design against.

Persona card.personas · .persona

Avatar, name/role, a handwritten quote in their voice, then labelled rows (goals · frustrations · behaviour). Built from interviews, never invented.

Maya, 23
Final-year student · high-suppressor

“I'll deal with it after deadlines.”

Goals
Stay on top of work without spiralling.
Frustrations
Notices stress only once it's physical.
Behaviour
Copes by distraction; avoids "wellness" apps.
Daniel, 26
First job · low self-empathy

“I don't really know how I feel.”

Goals
Understand patterns over time.
Frustrations
Dismisses his own feelings quickly.
Behaviour
Prefers talking aloud to writing.
Empathy map.empathy · .empathy__q

The classic four quadrants — says · thinks · does · feels — for one user in one moment.

Says
  • "I'm fine, just busy."
  • "I'll relax after this week."
Thinks
  • Something feels off but can't name it.
  • Doesn't want to seem dramatic.
Does
  • Scrolls, snacks, powers through.
  • Avoids apps that nag.
Feels
  • Tense, wired, a little numb.
  • Guilty for "not coping".
User journey map.journey · --stages

Stages across the top, an emotion curve, then rows for thoughts, pain points and opportunities. Set --stages to the column count.

Stage
Trigger
Spike
Cope
After
Emotion
Thinking
"Lots to do."
"Why am I like this?"
"Just push through."
"That passed."
Pain point
No early signal
Can't name it
Effort too high
—
Opportunity
Sense early
Name it for them
One-tap relief
Reflect later
Problem statement.statement

The pivot of the whole study — a bold framing line plus a supporting paragraph, anchored by a single icon.

The problem statement

People feel stress they can't name, at moments they can't predict — yet every tool asks them to notice, open and log exactly when they're least able to.

The opportunity isn't a better check-in. It's removing the check-in entirely — meeting people on the body, in the moment, with no effort required.

How-might-we & design challenge.hmw · .challenge-card

Reframe the problem as opportunity questions, then crystallise the brief into one centred challenge card.

01

How might we offer support without asking someone to open an app?

02

How might we help in the moment a spike happens, not hours later?

03

How might we make the first action effortless at someone's lowest?

The design challenge

How might we…help people notice stress before it escalates — with no self-reporting?

Problem mind map.mindmap · .mm-core · .mm-node

One core failure branching into the distinct gaps it creates — each gap becomes a design target.

The core problem
Tools demand effort at the exact moment a person has none.
Gap 01
Detection
By the time someone logs distress, the moment has passed.
Gap 02
Timing
Reminders fire on a schedule, not when stress spikes.
Gap 03
Activation
Unlocking and tapping is friction when capacity is lowest.
Gap 04
Pattern
One-off check-ins never connect into a longer story.
05Defend the decisions

Show the thinking, not just the pixels

Where you stood in the market, and the forks where you traded the obvious option for the one the research demanded.

Versus comparison.versus · --win

Two approaches head-to-head with a centre "vs". The winning column carries the coral wash.

The familiar approach
Screen-first app
  • Waits to be opened — misses the moment
  • Relies on self-report and memory
  • Effort highest when capacity is lowest
vs
This project's approach
Body-first wearable
  • Senses passively — no opening required
  • Reads biosignals, not typed input
  • Helps in the moment, on the wrist
Competitor matrix.matrix · --col-you

Feature-by-feature against the field. The highlighted "you" column makes the empty space — the opportunity — obvious.

CapabilityApp AApp BWearable CThis
Passive sensing——✓✓
In-the-moment help—✓—✓
No logging required———✓
On-device privacy——✓✓
Pivotal decision.decision · .dcol

Three columns — considered · chose · why. The clearest way to show judgement under trade-offs.

01
Screen-first app, or body-first wearable?
Considered
A notification-led app — familiar, fastest to ship.
Chose
A haptic wrist cue. Support that reaches the body before a screen.
Why
The 95% abandonment is an attention problem. Another screen loses by default.
Design-decision strip.dimp-strip

A compact one-liner to drop between sections — a running record of decisions and the feature each produced.

Design decision
Sense stress passively on the wrist — never depend on the user logging a mood.
→ Passive sensing
06Solve & reflect

Reveal the work — then be honest about it

Architecture, flows, the screens themselves, before-and-after proof, and the closing reflection. The most powerful reveal is a design that failed testing and got fixed.

Information architecture.ia · .ia__node

A tidy sitemap tree — root, primary destinations, and the screens beneath each. Highlight the signature surface.

App root
Now
Detected state
One-tap breathing
Cope
Strategy library
Voice dump
Patterns
Weekly view
Triggers
You
Device & privacy
Baseline
User flow.flow · .flow__node

A linear node→node path with start and decision variants. Collapses to a vertical stack on mobile.

Spike detected
passive
→
Haptic pulse
on wrist
→
Squeeze?
decision
→
Breathing guide
screen optional
→
Reflect later
opt-in
Feature spotlight.spotlight · --rev · .phone

Alternating media + narrative for the final-design walkthrough. Use the .phone frame for screens; add --rev to flip sides.

01

The moment, handled on the wrist

A detected spike triggers a single pulse. One squeeze starts the breathing guide — the screen is entirely optional, so the lowest-capacity moment still has a way in.

Zero-UI entryHaptic-led
Before / after.ba · .ba__badge

Annotated comparison with bullet notes — ideal for "this failed testing, here's the fix". The single most convincing thing in a portfolio.

BeforeScreen-first check-in
  • Opened the app, then rated and tagged a mood.
  • Three taps and a text field — friction at peak stress.
AfterWrist-first, one cue
  • A spike triggers a single pulse — no opening anything.
  • Reflection moved after the moment, opt-in.
Screen gallery (carousel).carousel

A swipeable gallery for final screens — arrows + dots, JS-driven. Galleries are the recommended way to present final designs.

Reflection · what I'd change.reflect

Honesty about the weakest result signals maturity. Anchor it to a real number you'd improve.

What I'd change

The reflection feature scored 3.8/5 — my weakest result. Even "lightweight," it asked for a little too much attention, too close to the moment. I'd strip it to a single glanceable pattern and make any depth strictly opt-in.

3.8/ 5 · the score that taught me the most
Design POV · closing.pov

A centred, panel-framed thesis to end on — your point of view, signed by hand.

My design POV

The future of mental-health design isn't more features — it's less friction. My job is to know exactly how little to ask.

— Shaivy
Next project.next

Keep the reader moving — a single large link to the next case study.